<div class="side-search" id="side-search">
    <h3 class="bbd-panel-title" style="height: 45px;padding-top: 5px">
        <input v-model="titleText" type="text" class="layui-input" placeholder="请输入要搜索的文章标题/关键字"
        >
    </h3>
    <div class="bbd-panel-main">
        <div v-if="!titleText" style="text-align: center;color:gray">
            暂未输入任何内容
        </div>
        <div v-if="titleText && article_list.length == 0" style="text-align: center;color:gray">
            暂未找到 <b v-text="titleText"></b>相关内容，换个关键词？？
        </div>
        <div class="side-search-article" v-for="art in article_list">
            <a :href="'/article_detail/'+ art.id +'.html'"
               style="color: #01AAED"
            >
                {% verbatim %}
                    <div v-html="signText(art.title,titleText)"></div>
                {% endverbatim %}
            </a>
        </div>
    </div>
</div>

<style>
    .side-search {
        margin-bottom: 5px;
        background-color: #fff;
        border: 1px darkgray solid;
        border-radius: 5px;
    }

    .side-search .layui-input {
        border-radius: 10px !important;
        border-color: #009688 !important;
        border-width: 2px;
        color: #009688 !important;
    }

    .side-search .side-search-article {
        max-height: 45px;
        border-bottom: 1px #fafafa solid;
        line-height: 1.5;
        margin-bottom: 5px;
        color: gray;
    }

    .side-search .side-search-article:hover {
        background: #fafafa;
    }
</style>
<script>
  new Vue({
    el: '#side-search',
    data: {
      titleText: '',
      article_list: []
    },
    watch: {
      titleText (value) {
        axios.get('article_list/', {
          params: {
            str: value
          }
        }).then(response => {
          this.article_list = response.data.data
        })
      }
    },
    methods: {
      signText (title, text) {
        const text2 = `<span style="color:red">${text}</span>`
        let title2 = title.replace(text, text2)
        return title2
      }
    }
  })
</script>